<template>
  <div class="logo">
    <img
      v-lazy="companyLogo"
      class="logo-icon"
    >
    <div class="desc flex-middle">
      <img v-lazy="gps">
      <span class="ml8">华贵</span>
      <span class="ml8 icon icon-sunny"></span>
      <span class="ml8">晴</span>
      <span class="ml8">24℃</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import companyLogo from '@imgs/company.png?url'
import gps from '@imgs/gps.svg?url'
</script>

<style lang="scss" scoped>
.logo {
  max-width: 270px;
  height: 467px;
  margin: auto;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 94px;
    background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }
  .desc {
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 0;
    line-height: 45px;
    color: #fff;
  }
  .logo-icon {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.icon {
  width: 20px;
  height: 20px;
}
.icon-sunny {
//   // background: url(@imgs/sunny@2x.png) 0 0 no-repeat;
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -32px -15px;
  width: 20px;
  height: 20px;
}
.icon-sunny-to-cloudy {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -34.83px -47.83px;
  width: 18.33px;
  height: 17.5px;
}
.icon-cloudy {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -34px -79px;
  width: 20px;
  height: 20px;
}
.icon-thunderstorm {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -34px -145px;
  width: 20px;
  height: 20px;
}
.icon-rainstorm {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -131px -112px;
  width: 20px;
  height: 20px;
}
.icon-mid-rain {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -242px -116px;
  width: 20px;
  height: 20px;
}
.icon-light-rain {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -322px -116px;
  width: 20px;
  height: 20px;
}
.icon-heavy-fog {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -131px -147px;
  width: 20px;
  height: 20px;
}
.icon-mist {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -225px -148px;
  width: 20px;
  height: 20px;
}
.icon-snow {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -406px -25px;
  width: 20px;
  height: 20px;
}
.icon-gale {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -406px -59px;
  width: 20px;
  height: 20px;
}
.icon-cyclone {
  background: url(@imgs/weather_white.png) 0 0 no-repeat;
  background-size: 509px 190px;
  background-position: -406px -89px;
  width: 20px;
  height: 20px;
}
</style>
